<script setup>
import http from '@/http'
import router from '@/router'
import axios from 'axios'
import {Button,Toast,PullRefresh} from 'vant'
import { ref,onMounted ,onUnmounted } from 'vue'
import {useRoute} from 'vue-router'
import InfiniteList from 'vue3-infinite-list';
const route = useRoute()
const clueId = ref('')
const videoList = ref([])
const num = ref(0)
const loading = ref(false)

onMounted(()=>{
    clueId.value = route.query.id
    getVideoInfo()
    
})
onUnmounted(()=>{
    localStorage.removeItem('curx')
})

// 下拉刷新
const onRefresh = async() => {
    videoList.value = []
    num.value = 0
    await getVideoInfo()
    loading.value = false;
}

const getVideoInfo = async() => {
    Toast.loading({  
      message: '加载中...',  
      forbidClick: true,  
      duration: 0, // 设置为 0 表示不会自动关闭  
    });  
    const res = await http.get(`/selectVideoByClueId/${clueId.value}`)
    videoList.value = res.data
    console.log(videoList.value);
    if(!res.data.length){
        loading.value = false;
        Toast.fail('没有视频')
        return
    }
    videoList.value.forEach((e,i)=>{
        getReview(e.videoId,i)
    })
}
const plList = ref([])
const getReview = async (videoId,index) => {
    if(localStorage.getItem('curx')){
        const arr = JSON.parse(localStorage.getItem('curx')).map(e=>{
            return e.gjz
        })
        const data = [videoId,clueId.value,arr]
        console.log(data);
        const res1 = await axios.post(`https://www.diandianyouke.cn:8081/tuokecomment/tuoke_comment/selectRemarkByVague`,data,{
            headers: {
              'Content-Type': 'application/json'
            }
        })
        Toast.clear()
        num.value += res1.data.data.length
        const arr1 = res1.data.data.map(e=>{
            if(plList.value.length>50||!e.remarkDYH.includes('抖音号')||e.remarkSXState==1)return
            return e
        })
        plList.value = [...plList.value,...arr1]
        plList.value = plList.value.filter((e,i)=>e)
        videoList.value[index].reviewList = res1.data.data
        console.log(videoList.value[index]);
    }else{
        const res = await http.get(`/selectRemarkByVideoId/${videoId}`)
        Toast.clear()
        console.log(res.data);
        num.value += res.data.length
        const arr = res.data.map(e=>{
            if(plList.value.length>50||!e.remarkDYH.includes('抖音号'))return
            return e
        })
        plList.value = [...plList.value,...arr]
        plList.value = plList.value.filter((e,i)=>e)
        videoList.value[index].reviewList = res.data
        console.log(plList.value);
    }
    
}


const goFilter = () => {
    router.push('/information/filter')
}

const startNow = () => {
      auto.invoke(
        'runRobotNow',
        [{ robot: require('@/auto/robot/robot.back'),plList:plList.value,storeId:JSON.parse(localStorage.getItem('shop')).shopDescription}],
        () => {

        },
      )
}
const stop = () => {
console.log(auto.invoke);
  auto.invoke('robotStop', [], () => { })
}
const isStart = ref(false)
const start = () => {
  if(!isStart.value){
    startNow()
    isStart.value = true
  }else{
    stop()
    isStart.value = false
  }
}
</script>

<template>
  <div class="page">
    <div class="text">共抓取到{{num}}条评论</div>
    <!-- <PullRefresh v-model="loading" @refresh="onRefresh" success-text="刷新成功" class="pullbox"> -->
        <div class="item-video" v-for="e,index in videoList" :key="e.videoId">
            <div class="item-top">
                <div class="mark">{{index+1}}</div>
                <div class="source">来源：{{e.videoSourceState==1?'关键词搜索':'账号搜索'}}</div>
            </div>
            <div class="video-info">
                <div class="video-name">{{e.videoAuthor}}</div>
                <span class="video-span">{{e.videoAuthorDYH}}</span>
                <span class="video-span">{{e.videoAuthorIP}}</span>
                <span class="video-span">{{e.videoTime}}</span>
                <div class="video-title">{{e.videoName}}</div>
            </div>
            <virtual-scroller v-for="item in e.reviewList" :key="item.remarkId" :size="80">
              <div class="review-item-top" style="margin-top:4vw">
                    <div class="review-item-left">
                        <div class="review-name">{{item.userName}}</div>
                        <span class="review-span">{{item.remarkDYH}}</span>
                        <span class="review-span">{{item.remarkIp}}</span>
                        <span class="review-span">{{item.remarkTime}}</span>
                    </div>
                    <div class="green" v-if="item.remarkSXState==1">已私信</div>
                </div>
                <div class="review-item-content">{{item.remarkText}}</div>
            </virtual-scroller>
            <!-- <InfiniteList class="review-item" :data="e.reviewList" :width="'100%'" :height="'100%'" v-slot="{ item }">
             <div class="review-item" v-for="e in item.reviewList" :key="e.remarkId">
                <div class="review-item-top">
                    <div class="review-item-left">
                        <div class="review-name">{{item.userName}}</div>
                        <span class="review-span">{{item.remarkDYH}}</span>
                        <span class="review-span">{{item.remarkIp}}</span>
                        <span class="review-span">{{item.remarkTime}}</span>
                    </div>
                    <div class="green" v-if="e.remarkSXState==1">已私信</div>
                </div>
                <div class="review-item-content">{{e.remarkText}}</div>
                </div>
            </InfiniteList> -->
        </div>
    <!-- </PullRefresh> -->
    <div class="btns">
        <Button class="btn-add" @click="goFilter">过滤线索</Button>
        <Button class="btn-vis" @click="start">{{isStart?'停止':'去拓客'}}</Button>
    </div>
  </div>
</template>

<style scoped>
.page{
    padding: 3vw;
    background-color: rgb(245,247,250);
    box-sizing: border-box;
    padding-bottom: 26vw;
}
.text{
    font-size: 3.73vw;
    color: rgb(69,70,74);
    margin-top: 3vw;
}
.pullbox{
        overflow-y:scroll;
        height: calc(100% - 34vw);
    }
.item-video{
    width: 100%;
    background-color: #fff;
    border-radius: 2vw;
    padding: 3vw;
    box-sizing: border-box;
    margin-top: 3vw;
}
.item-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mark{
    width: 5vw;
    height: 5vw;
    background-color: rgb(48,49,51);
    border-radius: 1vw;
    font-size: 3.2vw;
    color: #fff;
    text-align: center;
    line-height: 5vw;
}
.source{
    font-size: 3.2vw;
    color: rgb(144,147,153);
}
.video-info{
    margin: 3vw 0;
    background-color: rgb(245,247,250);
    border-radius: 1vw;
    padding: 2.13vw;
    box-sizing: border-box;
}
.video-name{
    font-size: 3.72vw;
    color: rgb(69,70,74);
    margin-bottom: 5vw;
}
.video-span{
    font-size: 3.2vw;
    color: rgb(144,147,153);
    margin-right: 3vw;
}
.video-title{
    margin-top: 2vw;
    font-size: 3.72vw;
    color: rgb(69,70,74);
}
.review-item{
    margin-top: 5vw;
}
.review-item-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.review-name{
    font-size: 3.2vw;
    color: rgb(69,70,74);
}
.review-span{
    font-size: 3.2vw;
    color: rgb(144,147,153);
    margin-right: 3vw;
}
.green{
    width: 13vw;
    font-size: 3.2vw;
    color: rgb(103,194,58);
}
.review-item-content{
    font-size: 4vw;
    color: rgb(48,49,51);
    font-weight: 500;
    margin-top: 3vw;
}
.btns{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 22vw;
    background-color: #fff;
    padding-top: 1vw;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    
}
.btn-add{
    width: 44vw;
    height: 12vw;
    color: rgb(64,158,255);
    border: 0.27vw solid rgb(64,158,255);
    border-radius: 26.67vw;
    background-color: #fff;
    font-size: 4.27vw;
    margin-right: 4vw;
}
.btn-vis{
    width: 44vw;
    height: 12vw;
    color: #fff;
    border-radius: 26.67vw;
    background-color: rgb(64,158,255);
    font-size: 4.27vw;
}
*{
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
}
input {
  -webkit-user-select:auto; /*webkit浏览器*/
}

</style>